<template>
  <!-- 怪物管理组件 -->
  <div class="mob">
    <!-- 面包屑路径导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>世界管理</el-breadcrumb-item>
      <el-breadcrumb-item>怪物列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容区 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入内容"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="getMobList"
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 怪物列表内容 -->
      <div class="mob-table">
        <el-table :data="mobList" border stripe style="width: 100%">
          <!-- <el-table-column type="index" label="#" width="48"></el-table-column> -->
          <el-table-column label="#" width="48" type="expand">
            <template slot-scope="props">
              <div>
                <el-row class="mob-burst">
                  <el-col
                    :span="16"
                    :offset="0"
                    style="border: 1px solid #EFEFEF;"
                    class="mob-burst-inner"
                  >
                    <el-col :span="6" :offset="0" class="mob-burst-left"
                      ><strong>掉落物品</strong></el-col
                    >
                    <el-col :span="18" :offset="0" class="mob-burst-right">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.item_name"
                        placement="top"
                        v-for="(item, index) in props.row.drops"
                        :key="index"
                      >
                        <el-image :src="path + item.item_icon" :lazy="true">
                          <el-image
                            :lazy="true"
                            :style="{ margin: '0' }"
                            :src="
                              path +
                                item.item_icon.replace(
                                  `0${item.item_id}.img`,
                                  `0${item.item_id}.img/0${item.item_id}.img`
                                )
                            "
                            slot="error"
                          ></el-image>
                        </el-image>
                      </el-tooltip>
                    </el-col>
                  </el-col>
                </el-row>
              </div> </template
          ></el-table-column>
          <el-table-column label="编号" width="70">
            <template slot-scope="props">
              <div
                v-html="$store.state.emphaKeyWord(props.row.mob_id, searchCont)"
              ></div>
            </template>
          </el-table-column>
          <el-table-column label="图鉴" width="200" align="center">
            <template slot-scope="props">
              <div v-if="props.row.mob_img">
                <el-image :src="path + props.row.mob_img">
                  <span slot="error">无怪物图鉴</span>
                </el-image>
              </div>
              <div v-else>
                无怪物图鉴
              </div>
            </template>
          </el-table-column>
          <el-table-column label="名称" width="100">
            <template slot-scope="props">
              <div
                v-html="
                  props.row.mob_name.replace(
                    searchCont,
                    `<span style=&quot;color: red;&quot;>${searchCont}</span>`
                  )
                "
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="等级"
            width="50"
          ></el-table-column>
          <el-table-column prop="hp" label="HP"> </el-table-column>
          <el-table-column prop="mp" label="MP"> </el-table-column>
          <el-table-column prop="speed" label="速度"> </el-table-column>
          <el-table-column prop="PADamage" label="物理攻击"></el-table-column>
          <el-table-column prop="PDDamage" label="物理防御"></el-table-column>
          <el-table-column prop="MADamage" label="魔法攻击"></el-table-column>
          <el-table-column prop="MDDamage" label="魔法防御"></el-table-column>
          <el-table-column prop="acc" label="仇恨范围"></el-table-column>
          <el-table-column prop="eva" label="攻击范围"></el-table-column>
          <el-table-column prop="pushed" label="碰撞"></el-table-column>
          <el-table-column prop="bodyAttack" label="击退"></el-table-column>
          <el-table-column prop="undead" label="不死族">
            <template slot-scope="props">
              <div>
                <el-switch
                  style="display: block"
                  v-model="props.row.undead"
                  @change="changeUndead(props.row)"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="exp" label="经验值"></el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="props">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editMob(props.row.id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteMob(props.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageConfig.currentPage"
          :page-sizes="pageConfig.pageSizes"
          :page-size="pageConfig.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageConfig.pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 修改怪物弹出层 -->
    <el-dialog
      title="编辑怪物"
      :visible.sync="dialogConfig.dialogEditMobVisible"
      class="edit-mob-dialog"
    >
      <el-form
        :model="editMobForm"
        :rules="editMobFormRules"
        ref="editMobForm"
        class="demo-ruleForm"
        :label-position="'left'"
        label-width="80px"
        inline
      >
        <el-form-item label="怪物ID" prop="mobId">
          <el-input v-model.trim="editMobForm.mobId" disabled></el-input>
        </el-form-item>
        <el-form-item label="怪物名称" prop="mobName">
          <el-input v-model.trim="editMobForm.mobName"></el-input>
        </el-form-item>
        <el-form-item label="怪物等级" prop="level">
          <el-input v-model.trim="editMobForm.level"></el-input>
        </el-form-item>
        <el-form-item label="HP" prop="hp">
          <el-input v-model.trim="editMobForm.hp"></el-input>
        </el-form-item>
        <el-form-item label="MP" prop="mp">
          <el-input v-model.trim="editMobForm.mp"></el-input>
        </el-form-item>
        <el-form-item label="速度" prop="speed">
          <el-input v-model.trim="editMobForm.speed"></el-input>
        </el-form-item>
        <el-form-item label="物理攻击" prop="PADamage">
          <el-input v-model.trim="editMobForm.PADamage"></el-input>
        </el-form-item>
        <el-form-item label="物理防御" prop="PDDamage">
          <el-input v-model.trim="editMobForm.PDDamage"></el-input>
        </el-form-item>
        <el-form-item label="魔法攻击" prop="MADamage">
          <el-input v-model.trim="editMobForm.MADamage"></el-input>
        </el-form-item>
        <el-form-item label="魔法防御" prop="MDDamage">
          <el-input v-model.trim="editMobForm.MDDamage"></el-input>
        </el-form-item>
        <el-form-item label="仇恨范围" prop="acc">
          <el-input v-model.trim="editMobForm.acc"></el-input>
        </el-form-item>
        <el-form-item label="攻击范围" prop="eva">
          <el-input v-model.trim="editMobForm.eva"></el-input>
        </el-form-item>
        <el-form-item label="击退力" prop="bodyAttack">
          <el-input v-model.trim="editMobForm.bodyAttack"></el-input>
        </el-form-item>
        <el-form-item label="碰撞力" prop="pushed">
          <el-input v-model.trim="editMobForm.pushed"></el-input>
        </el-form-item>
        <el-form-item label="经验值" prop="exp">
          <el-input v-model.trim="editMobForm.exp"></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-form-item style="text-align: right">
            <el-button
              @click="dialogConfig.dialogEditMobVisible = false"
              style="margin-right: 15px;"
              >取消</el-button
            >
            <el-button type="primary" @click="editMobSubmit('editMobForm')"
              >确定</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 数值验证
var checkNum = (rule, value, callback) => {
  if (value < 0) {
    callback(new Error('请输入大于等于0的整数'));
  } else {
    callback();
  }
};
export default {
  data () {
    return {
      // 搜索内容
      searchCont: '',
      // 怪物列表数据
      mobList: [],
      // 资源路径
      path: '',
      // 分页器参数配置
      pageConfig: {
        pageTotal: 0, // 分页器总条数
        pageSize: 10, // 每页显示条数
        pageSizes: [5, 10, 15, 20, 25], // 可选择的每页条数
        currentPage: 1 // 分页器当前页码
      },
      // 弹出层配置
      dialogConfig: {
        dialogEditMobVisible: false
      },
      // 编辑怪物数据
      editMobForm: {
        id: null, // id
        mobId: '', // 怪物编号
        mobName: '', // 怪物名称
        level: 0, // 怪物等级
        hp: 0, // 怪物血量
        mp: 0, // 怪物魔量
        speed: 0, // 怪物速度
        PADamage: 0, // 物理攻击
        PDDamage: 0, // 物理防御
        MADamage: 0, // 魔法攻击
        MDDamage: 0, // 魔法防御
        acc: 0, // 仇恨范围
        bodyAttack: 0, // 碰撞力
        exp: 0, // 经验值
        eva: 0, // 主动攻击范围
        pushed: 0 // 击退力
      },
      // 编辑怪物表单验证
      editMobFormRules: {
        mobName: [
          { required: true, message: '请输入怪物名称', trigger: 'blur' },
          {
            min: 1,
            max: 12,
            message: '怪物名称在 1 到 12 个字符',
            trigger: 'blur'
          }
        ],
        level: [
          { required: true, message: '请输入怪物等级', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        hp: [
          { required: true, message: '请输入怪物血量', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        mp: [
          { required: true, message: '请输入怪物魔量', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        speed: [
          { required: true, message: '请输入怪物移动速度', trigger: 'blur' }
        ],
        PADamage: [
          { required: true, message: '请输入物理攻击力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        PDDamage: [
          { required: true, message: '请输入物理防御力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        MADamage: [
          { required: true, message: '请输入魔法攻击力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        MDDamage: [
          { required: true, message: '请输入魔法防御力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        acc: [
          { required: true, message: '请输入仇恨值范围', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        bodyAttack: [
          { required: true, message: '请输入碰撞攻击力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        exp: [
          { required: true, message: '请输入经验值', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        eva: [
          { required: true, message: '请输入主动攻击范围', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        pushed: [
          { required: true, message: '请输入怪物击退力', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        mobId: [{ required: true, message: '请输入怪物ID', trigger: 'blur' }]
      }
    };
  },
  methods: {
    getMobList () {
      // 获取地图列表
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/mobList', {
          params: {
            search: this.searchCont.trim(),
            pagenum: this.pageConfig.currentPage,
            pagesize: this.pageConfig.pageSize
          }
        })
        .then(res => {
          if (res.status === 0) {
            // 处理数据
            res.data.forEach(async item => {
              if (item.undead === 1) {
                item.undead = true;
              } else {
                item.undead = false;
              }
              await this.$axios.get('/mobDrops/' + item.id).then(res2 => {
                if (res2.status === 0) {
                  item.drops = res2.data;
                }
              });
            });
            console.log(res.data);
            // 设置分页
            this.pageConfig.pageTotal = res.total;
            this.pageConfig.currentPage = res.pagenum;
            // 设置数据
            this.mobList = res.data;
            this.path = res.path;
            // 判断当前页是否为空
            if (
              this.pageConfig.pageTotal ===
              (this.pageConfig.currentPage - 1) * this.pageConfig.pagesize
            ) {
              if (this.pageConfig.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.pageConfig.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editMob (id) {
      // 修改怪物
      this.editMobForm.id = id;
      // 打开弹出层
      this.dialogConfig.dialogEditMobVisible = true;
      // 根据ID查询怪物信息
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      // 发起请求
      this.$axios
        .get('/mob/' + id)
        .then(res => {
          if (res.status === 0) {
            // 设置数据
            this.editMobForm.mobId = res.data.mob_id;
            this.editMobForm.mobName = res.data.mob_name;
            this.editMobForm.level = res.data.level;
            this.editMobForm.hp = res.data.hp;
            this.editMobForm.mp = res.data.mp;
            this.editMobForm.speed = res.data.speed;
            this.editMobForm.PADamage = res.data.PADamage;
            this.editMobForm.PDDamage = res.data.PDDamage;
            this.editMobForm.MADamage = res.data.MADamage;
            this.editMobForm.MDDamage = res.data.MDDamage;
            this.editMobForm.acc = res.data.acc;
            this.editMobForm.bodyAttack = res.data.bodyAttack;
            this.editMobForm.exp = res.data.exp;
            this.editMobForm.eva = res.data.eva;
            this.editMobForm.pushed = res.data.pushed;
          } else {
            // 请求错误消息
            this.$message.error(res.msg);
            // 关闭弹出层
            this.dialogConfig.dialogEditMobVisible = false;
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
          // 关闭弹出层
          this.dialogConfig.dialogEditMobVisible = true;
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editMobSubmit (formName) {
      // 修改怪物提交
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          // 发起修改提交请求
          this.$axios
            .put('/mob/' + this.editMobForm.id, {
              editMobData: this.editMobForm
            })
            .then(res => {
              if (res.status === 0) {
                // 提示成功信息
                this.$message.success(res.msg);
                // 关闭弹出层
                this.dialogConfig.dialogEditMobVisible = false;
                // 重新刷新数据
                this.getMobList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        }
      });
    },
    deleteMob (id) {
      // 删除怪物
      // 调用确认框
      this.$confirm('你确定要删除该怪物吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          this.$axios
            .delete('/mob/' + id)
            .then(res => {
              if (res.status === 0) {
                // 提示成功信息
                this.$message.success(res.msg);
                // 重新刷新数据
                this.getMobList();
              } else {
                // 提示失败信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        })
        .catch(() => {});
    },
    changeUndead (obj) {
      // 更改怪物是否为不死族
      var status = obj.undead ? 1 : 0;
      this.$axios
        .put('/mob/undead/' + obj.id, {
          mobUndead: status
        })
        .then(res => {
          if (res.status === 0) {
            // 提示成功信息
            this.$message.success(res.msg);
          } else {
            // 提示失败信息
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        });
    },
    // expandChange (row, expandedRows) {
    //   console.log(row);
    //   console.log(expandedRows);
    //   this.$axios
    //     .get('/mobDrops/' + row.id)
    //     .then(res => {
    //       if (res.status === 0) {
    //         // 提示成功信息
    //         this.$message.success(res.msg);
    //         row.drops = res.data;
    //         console.log(res.data);
    //       } else {
    //         // 提示失败信息
    //         this.$message.error(res.msg);
    //       }
    //     })
    //     .catch(error => {
    //       // 请求失败
    //       this.$message.error(error);
    //     });
    // },
    handleSizeChange (val) {
      // 切换每页条数重新获取数据
      this.pageConfig.pageSize = val;
      this.getMobList();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取数据
      this.pageConfig.currentPage = val;
      this.getMobList();
    },
    searchClear () {
      this.getMobList();
    }
  },
  mounted () {
    this.getMobList();
  }
};
</script>

<style lang="less" scoped>
.mob-table /deep/ {
  .mob-burst {
    .mob-burst-inner {
      display: flex;
      align-items: center;
    }
    .mob-burst-left {
      display: flex;
      justify-content: center;
      align-items: center;
      strong {
        font-size: 14px;
      }
    }
    .mob-burst-right {
      border-left: 1px solid #efefef;
    }
    .el-image {
      margin: 15px;
    }
  }
}
</style>
